<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'adminmessage.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link rel="stylesheet" type="text/css" href="lib/layui/css/layui.css"/>
	
	

	<script type="text/html" id="iswheelTpl">
	  <!-- 这里的 checked 的状态只是演示 -->
	  	<input type="checkbox" name="msstate" value="{{d.mid}}" lay-skin="switch" lay-text="已受理|未受理" lay-filter="msstate" {{ d.msstate == 'true' ? 'checked' : '' }}>
	</script>
	
	<script src="lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <!-- <script id="toolbar" type="text/html">
 	 <div class="layui-btn-container">
   		<button class="layui-btn layui-btn-sm" lay-event="add">添加数据</button>
    	<button class="layui-btn layui-btn-sm" lay-event="del">删除数据</button>
  	</div>
</script> -->
<script id="bar" type="text/html">

  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
  <script>
	layui.use(['table','jquery','form'], function(){
	  var table = layui.table;
	  var $ = layui.$;
	  var form = layui.form;
	  
	    
    //监听锁定操作
     form.on('switch(msstate)', function(obj){
   
  	$.post('AdminMessageServlet',{
  		mid:this.value,
  		msstate:obj.elem.checked,
  		order:6
  	},function(res){
  		if(res.result.success){
		    layer.msg(res.result.message);
		 }else{
			layer.msg(res.result.message);
		}
  	},'json');
  });
		 
	 
	  //方法级渲染
	  table.render({
	    elem: '#messagetable'
	    ,url: 'AdminMessageServlet'
	    ,toolbar: '#toolbar'
	    ,cols: [[
	      {checkbox: true, fixed: true}
	      //,{field:'mid', title: '留言编号', width:110, sort: true, fixed: true}
	      ,{field:'msname', title: '用户姓名', width:120}	      
	      ,{field:'msphone', title: '电话', width:200}
	      ,{field:'msemail', title: '邮箱', width:200}
	      ,{field:'mscontent', title: '留言内容', width:200}
	      ,{field:'time', title: '留言时间', width:120,sort: true}
	       ,{field:'msstate', title: '是否受理',  width:100,templet: '#iswheelTpl',unresize:true}
	      ,{fixed: 'right', title:'操作', toolbar: '#bar', width:150}      
	    ]]
	    ,id: 'messageReload'
	    ,page: true
	    ,where:{
	    	order:1
	    }
	  });
	  //监听锁定操作
  form.on('checkbox(lockDemo)', function(obj){
    layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
  });
	  //头工具栏事件
  table.on('toolbar(messagetable)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event){
      case 'add':        
       layer.open({
       	type:1,
       	content:$("#addmessageform"),
       	area: ['400px', '400px']
       });
      break;
      case 'del':      
         var data = checkStatus.data;
	     var arrmids=new Array(data.length);
	     for(var i=0;i<data.length;i++){
	     	arrmids[i]=data[i].mid;
	     }
	 	layer.confirm('真的删除吗', function(index){
        $.post('AdminMessageServlet',{
       	arrmids:arrmids,
       	order:5
       },function(res){
       	if(res.result.success){
       		layer.msg(res.result.message);
       		table.reload("messageReload");
       	}else{
       		layer.msg(res.result.message);
       	}
       },'json');
      });
      break;
      
      //自定义头工具栏右侧图标 - 提示
      case 'LAYTABLE_TIPS':
        layer.alert('这是工具栏右侧自定义的一个图标按钮');
      break;
    };
  });
   form.on('submit(addmessage)', function(data){
		  var str=$("#addmessageform").serialize()+"&order=2";
		  $.post('AdminMessageServlet',str,function(res){
		  	if(res.result.success){
		  		layer.closeAll();
		  		layer.msg(res.result.message);
		        table.reload("messageReload");
		        $("#addmessageform")[0].reset();
		        form.render();		  		
		  	}else{
		  		layer.msg(res.result.message);
		  	}
		  },"json");
		  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		});	  
		 //监听行工具事件
   table.on('tool(messagetable)', function(obj){
    var data = obj.data;
    //console.log(obj)
    if(obj.event === 'del'){
      layer.confirm('真的删除吗', function(index){
        $.post('AdminMessageServlet',{
       	mid:data.mid,
       	order:4
       },function(res){
       	if(res.result.success){
       		layer.msg(res.result.message);
       		table.reload("messageReload");
       	}else{
       		layer.msg(res.result.message);
       	}
       },'json');
      });
    } else if(obj.event === 'edit'){
				       layer.open({
				       	type:1,
				       	content:$("#updatemessageform"),
				       	area: ['400px', '400px'],
				       	title:"您正在修改用户["+data.msname+"]的信息"
				       });
				      form.val("updatemessageform", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
						 "msname":data.msname,	
						 "msphone":data.msphone,
						 "msemail":data.msemail,
						 "mscontent":data.mscontent,
						 "msstate":data.msstate,					 
						 "mid":data.mid
						});
						form.on('submit(updatemessage)', function(data){
					  var str=$("#updatemessageform").serialize()+"&order=3";
					  $.post('AdminMessageServlet',str,function(res){
					  	if(res.result.success){
					  		layer.closeAll();
					  		layer.msg(res.result.message);
					        table.reload("messageReload");
					        $("#updatemessageform")[0].reset();
					        form.render();
					  		
					  	}else{
					  		layer.msg(res.result.message);
					  	}
					  },"json");
					  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
					});
				    }
  });
	   active = {
	    reload: function(){
	    	 var msname = $('#msname');
	    	 var msstate = $('#msstate');
	      //执行重载
	      table.reload('messageReload', {
	        page: {
	          curr: 1 //重新从第 1 页开始
	        }
	        ,where: {
	         	msname: msname.val(),
	         	msstate: msstate.val(),
	            order:1
	        }
	      }, 'data');
	    }
	  };
	  
	  $('#search').on('click', function(){
	    var type = $(this).data('type');
	    active[type] ? active[type].call(this) : '';
	  });
	});
	</script>
  <body>
  <form class="layui-form" action="" lay-filter="updatemessageform" id="updatemessageform" style="display: none;">
	<input name="mid" style="display: none;">
	<div class="layui-form-item">					   
	     <label class="layui-form-label">用户姓名</label>
	    <div class="layui-input-inline">
	      <input name="msname" class="layui-input" type="text" placeholder="请输入姓名" autocomplete="off" >
	    </div>					    					    
	</div>
	<div class="layui-form-item">					   
		     <label class="layui-form-label">电话</label>
		    <div class="layui-input-inline">
		      <input name="msphone" class="layui-input" type="tel" placeholder="请输入电话" autocomplete="off" lay-verify="required|phone">
		    </div>					    					    
		</div>
		<div class="layui-form-item">					   
	     <label class="layui-form-label">邮箱</label>
	    <div class="layui-input-inline">
	      <input name="msemail" class="layui-input" type="text" placeholder="请输入邮箱" autocomplete="off" lay-verify="email" >
	    </div>					    					    
	</div>
	<div class="layui-form-item">					   
	     <label class="layui-form-label">留言内容</label>
	    <div class="layui-input-inline">
	      <input name="mscontent" class="layui-input" type="text" placeholder="请输入留言" autocomplete="off" >
	    </div>					    					    
	</div>
	<div class="layui-form-item">					   
	     <label class="layui-form-label">是否留言</label>
	    <div class="layui-input-inline" style="width:190px;">
			<select  name="msstate">
				<option>true</option>
				<option>false</option>
			</select>
		</div>				    					    
	</div>
	<div class="layui-form-item">
	    <div class="layui-input-block">
	      <button class="layui-btn" type="submit" lay-filter="updatemessage" lay-submit="">立即提交</button>
	      <button class="layui-btn layui-btn-primary" type="reset">重置</button>
	    </div>
	</div>
</form>  
  <form class="layui-form" action="" id="addmessageform" style="display: none;">
	<div class="layui-form-item">					   
	     <label class="layui-form-label">用户姓名</label>
	    <div class="layui-input-inline">
	      <input name="msname" class="layui-input" type="text" placeholder="请输入姓名" autocomplete="off" >
	    </div>					    					    
	</div>
	<div class="layui-form-item">					   
		     <label class="layui-form-label">电话</label>
		    <div class="layui-input-inline">
		      <input name="msphone" class="layui-input" type="tel" placeholder="请输入电话" autocomplete="off" lay-verify="required|phone">
		    </div>					    					    
		</div>
		<div class="layui-form-item">					   
	     <label class="layui-form-label">邮箱</label>
	    <div class="layui-input-inline">
	      <input name="msemail" class="layui-input" type="text" placeholder="请输入邮箱" autocomplete="off" lay-verify="email" >
	    </div>					    					    
	</div>
	<div class="layui-form-item">					   
	     <label class="layui-form-label">留言内容</label>
	    <div class="layui-input-inline">
	      <input name="mscontent" class="layui-input" type="text" placeholder="请输入留言" autocomplete="off" >
	    </div>					    					    
	</div>
	<div class="layui-form-item">
	    <div class="layui-input-block">
	      <button class="layui-btn" type="submit" lay-filter="addmessage" lay-submit="">立即提交</button>
	      <button class="layui-btn layui-btn-primary" type="reset">重置</button>
	    </div>
	</div>
</form>
   <div class="layui-form-item" style="margin-top: 10px; margin-left:10px">
			<form class="layui-form" method="post" onsubmit="return false;">
				<label class="layui-form-mid">用户姓名:</label>
				<div class="layui-input-inline" style="width:100px;">
					<input type="text" id="msname" name="msname" autocomplete="off" class="layui-input">
				</div>
				<label class="layui-form-mid">是否受理:</label>
				<div class="layui-input-inline" style="width:100px;">
					<select id="msstate" name="msstate">
						<option value="">请选择</option>
						<option value="true">是</option>
						<option value="false">否</option>
					</select>
				</div>
				
				<div class="layui-input-inline" style="width:100px;">
					<button class="layui-btn" id="search" data-type="reload">搜索</button>
				</div>
			</form>
		</div>
		<table class="layui-hide" id="messagetable" lay-filter="messagetable"></table> 
  </body>
</html>
